<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- bootstrap框架 -->
    bootstrap框架是 tuiter 公开的框架,里面规定了全局样式,组件,JS插件可以直接调用,不用背,需要的时候去找

    需要添加或更改样式,部分可以直接在class里添加类名


    <!-- 重点要记的 -->
    .container
    container类自带间距15px;
    版心作用 自带padding margin 默认宽度为1200px

    .row
    row类自带间距-15px

    container-fluid
    不设置宽高 自带padding margin
    占满一行,左右留边距

    <!-- 栅格系统 -->
    将整个网页的宽度分成 几 等份,之后按照视口尺寸变化,内容自适应根据栅格份数进行缩放

    bootstrap3将视口尺寸分为12份
    响应断点为四个
    col-xs-* 超小屏幕 小于768px
    col-sm-* 小屏幕 大于768px小于998px
    col-md-* 中等屏幕
    col-lg-* 大屏幕
    *为所占栅格份数


    <!-- bootstrap调用 -->
    全局CSS样式 组件 js插件
    需要的时候通过右侧目录查找,复制粘贴然后改变需要添加的关键名词

    <!-- !!!!源码修改!!!! -->
    !!!!重点!!!!
    1.首先在bootstrap文件夹中找到名为variables的less文件
    2.打开之后在需要更改的地方搜索,然后更改样式
    3.之后返回顶部,写入 // out:false,main:bootstrap.css
    4.在link 的bootstrap文件里找到bootstrap.css,然后将刚刚生成的文件进行替换覆盖,之后在link中改变文件为此文件

</body>

</html>